<template>
    <div class="page">
        <div class="page-top">
            <!-- 面包屑 -->
            <Hreadcrumb :hreadcrumbAry="hreadcrumbAry" />
        </div>
        <div class="page-content">
            <a-form-model layout="inline" style="margin-bottom: 20px" :form="form" @submit="handleSubmit">
                <a-form-model-item label="提现日期">
                    <a-range-picker show-time format="YYYY-MM-DD HH:mm:ss" v-model="timeValue" @change="bindTime" />
                </a-form-model-item>
                <a-form-model-item label="用户名">
                    <a-input v-model="form.username"></a-input>
                </a-form-model-item>
                <a-form-model-item>
                    <a-button type="primary" html-type="submit"> 提交 </a-button>
                    <a-button style="margin-left: 15px" @click="bindReset">
                        重置
                    </a-button>
                </a-form-model-item>
            </a-form-model>
            <div style="margin-bottom:10px">
                <a-button type="primary" @click="back"> 批量驳回 </a-button>
            </div>
            <a-table :columns="columns" :data-source="data" :loading="loading" :pagination="pagination"
                @change="handleTableChange" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }">
                <span slot="options" slot-scope="text, record">
                    <a-button type="primary" @click="daqian(record)">汇款</a-button>
                    <a-button type="primary" @click="bohui(record)" style="margin-left:10px">驳回</a-button>
                </span>
                <span slot="status" slot-scope="text, record">
                    {{ record.userCard.disable ? '已处理' : "待处理" }}
                </span>
                <span slot="daozhang" slot-scope="text, record">
                    {{ Number(record.money * 0.925).toFixed(2) }}
                </span>
                <template slot="footer" slot-scope="">
                    提现总额：{{ total }} ，到账总额：{{ total2 }}
                </template>
            </a-table>
            <a-modal :visible="visible" title="关联客户" @ok="onSubmit" @cancel="handleCancel" width="600px">
                <a-form-model :form="cusForm" :label-col="labelCol" :wrapper-col="wrapperCol">
                    <a-form-model-item label="客户ID">
                        <a-input style="width:200px" v-model='cusForm.id'></a-input>
                    </a-form-model-item>
                    <a-form-model-item label="客户名称">
                        <a-input style="width:200px" v-model='cusForm.name'></a-input>
                    </a-form-model-item>
                </a-form-model>
            </a-modal>
        </div>
    </div>
</template>
<script>
import Hreadcrumb from "@/components/Hreadcrumb";
import { tixianList, dakuan, onBatchBack } from "@/request/api";
export default {
    data() {
        return {
            loading: false,
            hreadcrumbAry: [
                { name: "首页", path: "/", query: {} },
                { name: "代理管理", path: "", query: {} },
                { name: "代理列表", path: "/AgentList", query: {} },
            ],
            selectedRowKeys: [],
            columns: [
                {
                    title: "提现日期",
                    dataIndex: "createTime",
                    key: "createTime",
                },
                {
                    title: "用户名",
                    dataIndex: "scsUser.name",
                    key: "scsUser.name",
                },
                {
                    title: "姓名",
                    dataIndex: "userCard.name",
                    key: "userCard.name",
                },
                {
                    title: "开户行",
                    dataIndex: "userCard.bank",
                    key: "userCard.bank",
                },
                {
                    title: "开户支行",
                    dataIndex: "userCard.subBank",
                    key: "userCard.subBank",
                },
                {
                    title: "银行卡号",
                    dataIndex: "userCard.cardNo",
                    key: "userCard.cardNo",
                },
                {
                    title: "提现金额",
                    dataIndex: "money",
                    key: "money",
                },
                {
                    title: "到账金额",
                    dataIndex: "daozhang",
                    key: "daozhang",
                    slots: { title: "到账金额" },
                    scopedSlots: { customRender: "daozhang" },
                },
                {
                    title: "状态",
                    dataIndex: "status",
                    key: "status",
                    slots: { title: "状态" },
                    scopedSlots: { customRender: "status" },
                },
                {
                    title: "完成日期",
                    dataIndex: "scsCustomerName",
                    key: "scsCustomerName",
                },
                {
                    title: "操作",
                    dataIndex: "options",
                    key: "options",
                    width: 180,
                    slots: { title: "操作" },
                    scopedSlots: { customRender: "options" },
                },
            ],
            pagination: { current: 1, size: 10 },
            data: [],
            form: {
                username: '',
                startTime: "",
                endTime: "",
            },
            cusForm: {
                name: '',
                id: ''
            },
            labelCol: { span: 6 },
            wrapperCol: { span: 12 },
            timeValue: undefined,
            current: '',
            visible: false
        };
    },
    components: {
        Hreadcrumb,
    },
    created() {
        this.tixianList(1, 10);
    },
    beforeCreate() {
    },
    methods: {
        async tixianList(p, ps) {
            this.loading = true;
            let { startTime, endTime, username } = this.form;
            let params =
                "p=" +
                (p - 1) +
                "&ps=" +
                ps +
                "&startTime=" +
                startTime +
                "&endTime=" +
                endTime +
                "&username=" +
                username
            let { data } = await tixianList(params);
            console.log(data);
            if (data.success) {
                this.loading = false;
                let pagination = { ...this.pagination };
                pagination.total = data.content.totalElements;
                this.pagination = pagination;
                this.data = data.content.content;
                let total = 0    
                data.content.content.forEach(item=>{
                    total += item.money
                })
                this.total = total
                this.total2 = Number(total * 0.925).toFixed(2);
            } else {
                this.loading = false;
                this.data = [];
            }
        },
        async dakuan(id) {
            let param = 'ids=' + id
            let { data } = await dakuan(param)
            if (data.success) {
                this.$message.success(data.content);
            }
        },
        daqian(record) {
            this.dakuan(record.id)
        },
        changeCus(record) {
            let that = this
            this.$confirm({
                title: '确定转正式代理',
                content: '',
                okText: '确定',
                okType: 'danger',
                cancelText: '取消',
                onOk() {
                    that.transCus(record.id)
                },
                onCancel() {
                    console.log('Cancel');
                },
            });

        },
        onSubmit() {
            console.log(this.current)
            this.bindAgent()
        },
        handleTableChange(pagination) {
            console.log(pagination);
            const pager = { ...this.pagination };
            pager.current = pagination.current;
            this.pagination = pager;
            this.getAgentList(pager.current, pager.size);
        },
        handleSubmit(e) {
            e.preventDefault();
            // console.log(this.form);
            this.tixianList(1, 10);
        },
        bindTime(date, dateString) {
            console.log(date, dateString);
            this.form.startTime = dateString[0];
            this.form.endTime = dateString[1];
        },
        bindReset() {
            this.form = {
                username: "",
                startTime: "",
                endTime: "",
            };
            this.timeValue = undefined;
            this.tixianList(1, 10);
        },
        show(record) {
            this.visible = true
            this.current = record.id
        },
        handleCancel() {
            this.visible = false
            this.current = ''
        },
        onSelectChange(selectedRowKeys) {
            console.log('selectedRowKeys changed: ', selectedRowKeys);
            this.selectedRowKeys = selectedRowKeys;
        },
        back() {
            let that = this
            let data = this.data
            let ids = []
            data.forEach((item, i) => {
                this.selectedRowKeys.forEach(index => {
                    if (index == i) {
                        ids.push(item.id)
                    }
                })
            })

            that.$confirm({
                content: '确认驳回？',
                onOk() {
                    that.onBatchBack(ids.join(','))
                },
                onCancel() {

                },
            });
        },
        async onBatchBack(ids) {
            let that = this
            let param = 'ids=' + ids
            let { data } = await onBatchBack(param);
            console.log(data)
            if (data.success) {
                that.$message.success("驳回成功");
                that.tixianList(1, 10);
            } else {
                that.$message.error(data.message);
            }
        },
        bohui(record) {
            let that = this
            that.$confirm({
                content: '确认驳回？',
                onOk() {
                    that.onBatchBack(record.id)
                },
                onCancel() {

                },
            });
        }
    },
};
</script>
<style>
.page-content {
    background-color: #fff;
    padding: 25px;
}
</style>